<template>
  <DataCollectionHeader/>
  <div class="dataCollectionList">
    <Search/>
    <div class="dataListMain" :style="{width: !isFold ? 'calc(100% - 370px)' : 'calc(100% - 50px)', left: !isFold ? '370px' : '50px'}">
      <div class="btnBox flex align-start justify-between">
        <div class="flex align-center">
          <el-button type="primary" icon="CirclePlus" @click="$router.push('/dataCollection/detail/edit')">新增</el-button>
          <el-button type="danger" icon="Delete" plain>批量删除</el-button>
          <el-button type="primary" icon="Upload" plain>数据导入</el-button>
          <el-button type="primary" icon="Download" plain>导出</el-button>
        </div>
        <div class="flex align-center">
          <el-button icon="Refresh" circle />
        </div>
      </div>
     <div class="tableBox">
       <el-table
           :data="tableDatas"
           style="width: 100%"
           :height="tableHeight"
           @selection-change="handleSelectionChange"
       >
         <el-table-column type="index" width="50" label="序号" align="center"/>
         <el-table-column type="selection" width="55" />
         <el-table-column prop="qcwybsm" label="清查唯一标识码" width="150" show-overflow-tooltip/>
         <el-table-column prop="hbly" label="合并来源" width="150" show-overflow-tooltip/>
         <el-table-column prop="dwmc" label="单位名称" width="150" show-overflow-tooltip/>
         <el-table-column prop="tyshxydm" label="统一社会信用代码" width="150" show-overflow-tooltip/>
         <el-table-column prop="dwlx" label="单位类型" width="150" show-overflow-tooltip/>
         <el-table-column prop="fddbr" label="法定代表人" width="150" show-overflow-tooltip/>
         <el-table-column prop="yqmc" label="园区名称" width="150" show-overflow-tooltip/>
         <el-table-column prop="yyzt" label="运营状态" width="150" show-overflow-tooltip/>
         <el-table-column prop="clnf" label="成立年份" width="150" show-overflow-tooltip/>
         <el-table-column prop="kynf" label="开业年份" width="150" show-overflow-tooltip/>
         <el-table-column prop="gddh" label="固定电话" width="150" show-overflow-tooltip/>
         <el-table-column prop="sfr" label="受访人" width="150" show-overflow-tooltip/>
         <el-table-column prop="cfrlxdh" label="受访人联系电话" width="150" show-overflow-tooltip/>
         <el-table-column prop="gsfrdwmc" label="归属法人单位名称" width="150"  show-overflow-tooltip/>
         <el-table-column prop="gsfrtyshxydm" label="归属法人统一社会信用代码" width="250" show-overflow-tooltip/>
         <el-table-column prop="cjsj" label="采集时间" width="150" show-overflow-tooltip/>
         <el-table-column prop="zt" label="状态" width="120" show-overflow-tooltip/>
         <el-table-column fixed="right" label="操作" align="center" width="200">
           <template #default>
             <el-button link type="primary" icon="Edit" @click="$router.push('/dataCollection/detail/edit')">编辑</el-button>
             <el-button link type="primary" icon="Delete" @click="handleClick">删除</el-button>
           </template>
         </el-table-column>
       </el-table>
     </div>
     <div class="paginationBox flex align-center justify-end">
       <el-pagination
           v-model:current-page="currentPage"
           v-model:page-size="pageSize"
           :page-sizes="[10, 50, 100, 200]"
           size="default"
           :background="true"
           layout="total, sizes, prev, pager, next, jumper"
           :total="400"
           @size-change="handleSizeChange"
           @current-change="handleCurrentChange"
       />
     </div>
    </div>
  </div>
</template>
<script setup name="DataCollectionList">
import DataCollectionHeader from '@/components/dataCollection/Header/index';
import { ref, reactive, onMounted, onBeforeUnmount } from 'vue';
import Search from './model/Search';
import useAppStore from '@/store/modules/app';
const appStore = useAppStore();
let isFold = computed(()=>appStore.isFoldSearch);
const multipleSelection = ref([])
let tableHeight = ref(300)
let tableDatas = reactive([])
const handleClick = () => {
  console.log('click')
}

const handleSelectionChange = (val) => {
  multipleSelection.value = val
}
onMounted(() => {
  for(let i=0; i < 30; i++) {
    tableDatas.push({
      qcwybsm: '001',
      hbly: '网站',
      dwmc: '内蒙古智开信息技术有限公司',
      tyshxydm: '91150100MA13PYG45E',
      dwlx: '有限责任公司(自然人投资或控股)',
      fddbr: '苑伟',
      yqmc: '内蒙古自治区呼和浩特市赛罕区',
      yyzt: '开业',
      clnf: '2020',
      kynf: '2020',
      gddh: '0471-9989887',
      sfr: '1',
      cfrlxdh: '15335579069',
      gsfrdwmc: '内蒙古智开信息技术有限公司',
      gsfrtyshxydm: '10010',
      cjsj: '2024/12/1',
      zt: '开业'
    })
  }
  nextTick(() => {
    tableHeight.value = document.body.clientHeight - 210;
    window.addEventListener('resize', () => {
      tableHeight.value = document.body.clientHeight - 210;
    });
  })
})
onBeforeUnmount(() => {
  window.removeEventListener('resize', () => {});
})

const currentPage = ref(1)
const pageSize = ref(10)

const handleSizeChange = val => {
  console.log(`${val} items per page`)
}
const handleCurrentChange = val => {
  console.log(`current page: ${val}`)
}
</script>
<style lang="scss" scoped>
.dataCollectionList{
  height: calc(100% - 70px);
  position: relative;
}
.dataListMain{
  width: calc(100% - 370px);
  transition: all 0.2s;
  position: absolute;
  left: 370px;
  top: 0;
  bottom: 0;
  padding: 20px 20px 10px;
  box-sizing: border-box;
  .btnBox{
    height: 50px;
  }
  .tableBox{
    height: calc(100% - 100px);
  }
  .paginationBox{
    height: 50px;
  }
}
</style>